<template>
    <div id="mapHome" class="">
        <div v-if="!isShow" class="btn-view centerH" @click="isShow = true">
			<img src="../assets/images/superposition.png" alt="">
			<p>叠加要素</p>
		</div>
		<div v-else class="body-view">
			<img class="return-img" @click="isShow = false" src="../assets/images/return.png" alt="" />
			<div class="sign-view" v-for="(item, index) in mapSignList" :key="index">
				<div>
					<el-checkbox size="small" @change="changeEvent(index)" v-model="item.isSelect"><span class="txt">{{item.name}}</span></el-checkbox>
				</div>
				
				<div class="children" v-for="(z, x) in item.Children" :key="x">
					<img class="icon" :src="z.icon" />
					<el-checkbox size="medium" @change="cutSelEvent(x)" v-model="z.isSelect"><span class="txt">{{z.name}}</span></el-checkbox>
				</div>
			</div>
		</div>
    </div>
</template>

<script type="text/ecmascript-6">
import {loadModules} from 'esri-loader';
	
    export default {
		props: ['mapSignList'],
        data () {
            return {
				isShow: true,
			}
        },
		mounted() {
			console.log(this.mapSignList)
		},
		methods: {
			changeEvent(index) {
				for (let i = 0; i < this.mapSignList[index].Children.length; i++) {
					this.mapSignList[index].Children[i].isSelect = this.mapSignList[index].isSelect
				}

			},
			cutSelEvent(e) {
				console.log('cutSelEvent', e)
			},
			// 在建工地
			
			// 
		},
    }
</script>
<style lang="less" rel="stylesheet/less">
#mapHome {
	.btn-view {
		height: 45px*@ratio;
		background: rgb(29, 42, 53);
		border-radius: 5px*@ratio;
		border: 1px*@ratio solid rgba(255, 255, 255, .7);
		display: flex;
		align-items: center;
		padding: 0 10px*@ratio;
		cursor: pointer;
		
		img {
			padding-right: 15px*@ratio;
			height: 22px*@ratio;
		}
		p {
			color: rgba(254, 255, 255, 0.9);
			font-size: 22px*@ratio;
			letter-spacing:2px*@ratio;
		}
	}
	.centerH {
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.body-view {
		width: 276px*@ratio;
		height: 517px*@ratio;
		background: rgb(5, 24, 37);
		border-radius: 5px*@ratio;
		position: relative;
		padding-top: 12px*@ratio;
		padding-left: 21px*@ratio;
		
		.return-img {
			width: 30px*@ratio;
			height: 30px*@ratio;
			position: absolute;
			top: 6px*@ratio;
			right: 6px*@ratio;
			cursor: pointer;
		}
		
		.sign-view {
			width: 100%;
			clear: both;
			padding-top: 10px*@ratio;
			.children {
				display: flex;
				align-items: flex-end;
				margin: 6px*@ratio 0;
				width: 47%;
				float: left;
				
				.icon {
					width: 14px*@ratio;
					height: 14px*@ratio;
					margin-right: 6px*@ratio;
				}
			}
			.txt {
				color: #ffffff;
				font-size: 12px*@ratio;
				opacity: .6;
			}
		}
	}
	.el-checkbox__inner {
		background-color: #092037!important;
		border: 1px*@ratio solid #9DA7B1!important;
		width: 10px*@ratio!important;
		height: 10px*@ratio!important;
	}
	.el-checkbox {
		font-size: 10px*@ratio!important;
	}
	.el-checkbox__inner::after {
		height: 7px*@ratio!important;
		width: 3px*@ratio!important;
		// border: 1px*@ratio solid #fff!important;
		border: 1px*@ratio solid #FFF!important;
		border-left: 0!important;
		border-top: 0!important;
		left: 2px*@ratio!important;
		top: 1px-@ratio!important;
	}
}

</style>
